<template>
  <div v-loading="listLoading" element-loading-text="加载中..." class="list_blog">
    <el-form inline>
      <el-form-item>
        <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-input type="number" placeholder="下载天数" v-model="searchForm.totalPage" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleDownLoadCompress">下载</el-button>
      </el-form-item>-->
    </el-form>
    <div class="table_body">
      <el-table
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="100%"
        style="width: 100%;"
      >
        <el-table-column type="id" width="50"></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
        <el-table-column width="300px">
          <template slot-scope="scope">
            <div class="poster">
              <img :src="scope.row.share_img">
              <el-button
                class="btn"
                plain
                size="mini"
                type="primary"
                icon="el-icon-download"
                circle
                @click="downLoadImage(scope.row.share_img)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="lookHandle(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="footer_pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 150]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      title="内容"
      :visible.sync="dialogDetailVisible"
      width="65%"
      size="mini"
      top="2vh"
      @open="dialogDetailOpen"
      :before-close="dialogDetailClose"
    >
      <div v-loading="dialogDetailLoading" element-loading-text="加载中...">
        <el-form label-width="80px" label-position="left">
          <el-form-item label="标题">
            <div>{{detailData.title}}</div>
          </el-form-item>
          <el-form-item label="音乐">
            <div class="music_box">
              <aplayer
                v-if="detailData.audio_src"
                class="aplayer"
                :music="{
                                    title: '未知',
                                    artist: '未知',
                                    src:detailData.audio_src||'' ,
                                    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                                }"
              />
              <el-button size="mini" type="primary" @click="downLoadImage(detailData.audio_src)">下载</el-button>
            </div>
          </el-form-item>
          <el-form-item label="内容">
            <div class="article_content">
              <div class="article_panel" v-html="detailData.content"></div>
              <el-button
                v-if="detailIsCopy"
                v-clipboard:copy="detailData.content"
                v-clipboard:success="articleCopySuccess"
                v-clipboard:error="articleCopyError"
                size="mini"
                type="primary"
                class="btn"
              >复制</el-button>
              <el-button
                v-if="!detailIsCopy"
                type="primary"
                class="btn"
                @click="translateImageLink"
              >替换链接</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right;">
          <el-button size="small" @click="dialogDetailClose">取 消</el-button>
          <el-button type="primary" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer';
import download from 'downloadjs';
import { DownLoadStaticFile } from '@/utils/downLoadFile';
import {
    homeList,
    detail,
    downLoadStatic,
    downLoadCompress
} from '@/api/xinxin';
export default {
    components: {
        Aplayer
    },
    data() {
        return {
            tableData: [],
            listLoading: false,
            dialogDetailVisible: false,
            dialogDetailLoading: false,
            detailData: { detail: '' },
            currentPage: 1,
            total: 0,
            pageSize: 10,
            detailId: '',
            detailIsCopy: true,
            searchForm: {
                totalPage: 1
            }
        };
    },
    created() {
        this.getIndex();
    },
    methods: {
        translateImageLink() {
            this.dialogDetailLoading = true;
            let id = this.detailId;
            detail(id, true)
                .then(res => {
                    console.log(res);
                    this.detailData = res.d;
                })
                .catch(err => {
                    console.log(err);
                })
                .finally(() => {
                    this.dialogDetailLoading = false;
                });
        },
        handleDownLoadCompress() {
            this.$message({
                message: '请稍等...',
                type: 'success',
                duration: 1 * 1000
            });
            let downLoadUrl = downLoadCompress();
            DownLoadStaticFile.downLoadSameArea(
                downLoadUrl,
                this.searchForm.totalPage
            );
        },
        articleCopySuccess(e) {
            this.$notify({
                title: '成功',
                message: '复制成功',
                type: 'success'
            });
        },
        articleCopyError(e) {
            this.$notify.error({
                title: '错误',
                message: '复制失败'
            });
        },
        downLoadImage(url) {
            downLoadStatic(url).then(res => {
                let { base64, type } = res.d;
                new DownLoadStaticFile(base64, type).download();
            });
        },
        lookHandle(row) {
            console.log(row);
            this.detailId = row.id;
            this.dialogDetailVisible = true;
            this.getDetail();
        },
        handleSizeChange(page) {
            console.log(page);
            this.pageSize = page;
            this.getIndex();
        },
        handleCurrentChange(page) {
            console.log(page);
            this.currentPage = page;
            this.getIndex();
        },
        dialogDetailOpen() {},
        dialogDetailClose() {
            this.detailData = { detail: {} };
            this.detailId = '';

            this.dialogDetailVisible = false;
        },
        refresh() {
            this.getIndex();
        },
        getDetail() {
            this.dialogDetailLoading = true;
            let id = this.detailId;
            detail(id)
                .then(res => {
                    console.log(res);
                    this.detailData = res.d;
                })
                .catch(err => {
                    console.log(err);
                })
                .finally(() => {
                    this.dialogDetailLoading = false;
                });
        },
        async getIndex() {
            this.listLoading = true;
            let page = this.currentPage;
            let pageSize = this.pageSize;
            const imgKey = ['img0', 'img1', 'img2'];
            try {
                const res = await homeList({
                    page,
                    pageSize
                });
                let newsList = res.d || [];
                this.total = 10000;
                this.tableData = newsList;
            } finally {
                this.listLoading = false;
            }
        }
    }
};
</script>

<style  lang='scss'>
.list_blog {
    width: 100%;
    height: 100%;
    position: relative;
    .mde_box {
        height: 32vh;
        overflow: auto;
    }
    .poster {
        height: 250px;
        width: 250px;
        position: relative;
        .btn {
            position: absolute;
            right: 5px;
            top: 5px;
        }
        img {
            width: 100%;
        }
    }
    .bg_image {
        width: 100%;
        height: 50px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .downLoad_btn {
            height: 28px;
        }
        .mini {
            width: 300px;
        }

        .big {
            width: 200px;
        }
    }
    .music_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .aplayer {
            width: 300px;
            margin-left: 0;
            display: inline-block;
        }
    }

    .article_content {
        height: 50vh;
        display: flex;
        justify-content: space-between;
        .article_panel {
            height: 100%;
            overflow: auto;
            flex: auto;
        }
        .btn {
            height: 28px;
            margin-left: 50px;
        }
    }
    .footer_pagination {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        background: #fff;
        z-index: 100;
        padding: 10px 0;
        text-align: center;
    }
    .table_body {
        padding-bottom: 50px;
        height: 80vh;
        box-sizing: border-box;
    }
}
</style>
